<!--
 * @Author: ChunLai
 * @Date: 2022-02-21 17:04:19
 * @LastEditTime: 2025-09-05 08:56:25
 * @Description: 投保前确认
 * @FilePath: \02.bldinsure\src\views\multipages\presure.vue
-->
<template>
  <div class="sure-page">
    <div class="headline">
      {{ sureFile.title }}
    </div>
    <div v-html="sureFile.contents"></div>
    <div class="check-box" v-if="sureFile.checked !== void 0">
      <van-checkbox
        v-model="sureFile.checked"
        checked-color="#ee0a24"
        icon-size="14px"
        shape="square"
      >
        {{ sureFile.checkDesc || "我已阅读以上内容并同意授权" }}
      </van-checkbox>
    </div>
    <FooterBtns rightText="下一步" btnNum="1" @saveForm="goNextStep" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "SurePage",
  data() {
    return {
      fileIdx: 0,
    };
  },
  computed: {
    ...mapGetters({
      presureCfg: "page/presureCfg",
    }),
    sureFile() {
      let res = {};
      if (this.presureCfg.length > 0) {
        res = this.presureCfg[this.fileIdx];
      }
      return res;
    },
  },
  created() {},
  methods: {
    goNextStep() {
      if (this.sureFile.checked !== void 0 && !this.sureFile.checked)
        return this.$msAlert(`请阅读《${this.sureFile.title}》,并勾选同意`);
      if (this.presureCfg.length - 1 === this.fileIdx) {
        this.$router.push("/form");
      } else {
        ++this.fileIdx;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.sure-page {
  padding: 0 14px;
  line-height: 1.5;
  padding-top: 50px;
  padding-bottom: 100px;
}

.headline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  letter-spacing: 2px;
  font-size: 16px;
  font-weight: 600;
  z-index: 90;
}

.check-box {
  margin: 14px 0 20px;
}
</style>
